<template>
  <div id="app">
	<el-container>
		<!-- 顶部信息 -->
	  <el-header class="header" >东软云医院管理系统（医生端???） 
		 <el-button @click="myincrement">increment</el-button>
	  </el-header>
	  <el-container class="content" >
		  <!-- 左侧菜单 -->
	    <el-aside width="200px" class="aside" >
			<!-- <ul>
				<li><router-link to="/helloworld">HelloWorld组件</router-link>  </li>
				<li><router-link to="/todolist">todolist组件</router-link> </li>
				<li><router-link to="/table">table组件</router-link> </li>
			</ul> -->
			
			<!-- 使用组件s -->
			<NavMenu></NavMenu>
	
			
		</el-aside>
		
		<!-- 右侧 s -->
	    <el-container>
			<!-- Main -->
	      <el-main>
			  
			  <router-view> </router-view>
			  
		  </el-main>
		  <!-- footer -->
	      <el-footer class="foot">Footer</el-footer>
	    </el-container>
	  </el-container>
	</el-container>
	
	
	
	



  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import  ToDoList from './components/ToDoList.vue'
import  NavMenu from './components/NavMenu.vue'


export default {
  name: 'App',
  
  // 局部组件
  components: {
	NavMenu
	
  },
  methods:{
	  myincrement(){
		  // this.$emit()
		  // this.$router
		  // this.$refs
		  //相当于调用了store对象的 setter方法给 count设置一个新的值
		  //错误的写法  this.$store.state.count = 12
		  this.$store.commit('increment'); //给count++
		  console.log(this.$store.state.count) ;
	  }
  }
}
</script>

<style scoped>
 .header{
	 background-color: #71ABD3;
	  line-height: 60px;
 }
 
 .content{
	 height: calc(100vh - 60px);
 }
 
 .aside{
	 background-color: #222D32;
	 height: 100%;
 }
 


 .foot{
	 line-height: 60px;
	 background-color: rgba(88, 94, 100, 0.5);
 }
 
</style>
